<script setup>
import { ref, onMounted } from "vue";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "axios";

const router = useRouter();
// 跳转页面
const jumpTo = (path) => {
  router.push(path);
};
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("图片应该为jpg或者png格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片不能超过2M");
    return false;
  }
  return true;
};
const form = ref({});

const getInfo = async () => {
  try {
    const res = await axios.get(`${apiUrl}/user`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    form.value = res.data.data;
  } catch (e) {}
};

const handleUploaded = (e) => {
  form.value.avatar = e.data.url;
};

const saveInfo = async () => {
  if (form.value.nickname === "") {
    ElMessage({
      message: "请输入昵称",
      type: "warning",
    });
    return;
  }
  if (typeof form.value.newPassword !== "undefined") {
    resetPassword();
  }
  try {
    const res = await axios.post(
      `${apiUrl}/user/edit`,
      {
        avatar: form.value.avatar,
        nickname: form.value.nickname,
        phone: form.value.phone,
      },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    ElMessage({
      message: "个人信息已保存",
      type: "success",
    });
    getInfo();
  } catch (e) {}
};

const resetPassword = async () => {
  if (form.value.newPassword !== form.value.newPassword2) {
    ElMessage({
      message: "两次密码不相同",
      type: "warning",
    });
    return;
  }

  try {
    const res = await axios.post(
      `${apiUrl}/register/reset`,
      { account: form.value.phone, captcha: "1234", password: form.value.newPassword },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );
    ElMessage({
      message: "密码已修改",
      type: "success",
    });
  } catch (e) {}
};

const logout = () => {
  localStorage.removeItem("LOGIN_STATUS_TOKEN");
  jumpTo("/");
};

onMounted(() => {
  getInfo();
});
</script>

<template>
  <div class="uploadImg">
    <el-upload
      class="avatar-uploader"
      :action="`https://api.zehaotarpaulin.cn/api/upload/image`"
      :on-success="handleUploaded"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :headers="{ Authorization: 'Bearer ' + getToken() }"
      :with-credentials="true"
      name="pics"
      :data="{ filename: 'pics' }"
      accept=".jpg,.png"
    >
      <img v-if="form.avatar" :src="form.avatar" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload>
    <p class="tips">{{ $t("account.changeAver") }}</p>
  </div>
  <div class="formBox">
    <el-form
      :model="form"
      label-width="auto"
      label-position="left"
      style="max-width: 600px; margin: 0 auto"
    >
      <div class="title">{{ $t("account.atitle1") }}</div>
      <el-form-item :label="$t('account.my') + 'ID'">
        <el-input v-model="form.uid" readonly />
      </el-form-item>
      <el-form-item :label="$t('account.nickName')">
        <el-input v-model="form.nickname" />
      </el-form-item>
      <el-form-item :label="$t('account.userType')">
        <el-input :value="form.group_id === 5 ? '个人用户' : '企业用户'" readonly />
      </el-form-item>
      <el-form-item :label="$t('account.phone')">
        <el-input v-model="form.phone" readonly />
      </el-form-item>

      <div class="title">{{ $t("account.atitle2") }}</div>
      <el-form-item :label="$t('account.password1')">
        <el-input
          value="***********"
          type="password"
          autocomplete="off"
          show-password
          readonly
        />
      </el-form-item>
      <el-form-item :label="$t('account.password2')">
        <el-input
          v-model="form.newPassword"
          type="password"
          autocomplete="off"
          show-password
        />
      </el-form-item>
      <el-form-item :label="$t('account.password3')">
        <el-input
          v-model="form.newPassword2"
          type="password"
          autocomplete="off"
          show-password
        />
      </el-form-item>
      <el-button type="primary" @click="saveInfo" style="width: 100%; margin-top: 30px">{{
        $t("account.confirmBtn")
      }}</el-button
      ><br />
      <el-button
        type="primary"
        @click="logout"
        style="width: 100%; margin-top: 30px; background: #fff; color: #000"
        >{{ $t("account.logout") }}</el-button
      >
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.uploadImg {
  margin: 30px auto;
  text-align: center;

  .tips {
    margin-top: 20px;
    font-size: 14px;
  }
}

.title {
  margin-bottom: 30px;
  font-weight: bold;
}

::v-deep .el-input__wrapper {
  border: 0;
  box-shadow: none;
}

::v-deep .el-form-item {
  border-bottom: 1px solid #ccc;
}

::v-deep .el-input__wrapper:hover {
  box-shadow: none !important;
}

::v-deep .el-input__inner {
  text-align: right;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px solid #ccc;
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>
